<template>
  <div>
    <h1>个人中心页面</h1>
    <div>numList数组的长度：{{ computedNum }}</div>
    <div v-for="(item, index) of numList" :key="index">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup>
import { computed, reactive } from "vue";
//---------计算属性computed方法-------------------------------------
let numList = reactive([
  {
    name: "王大牛",
  },
  {
    name: "王二虎",
  },
  {
    name: "王三龙",
  },
]);
// 计算属性简写方式(计算属性不可被修改)
let computedNum = computed(() => {
  return numList.length + 1;
});
// 计算属性完整写法（可读写）
let obj = reactive({
  firstName: "1",
  lateName: "2",
});
obj.fullNum = computed({
  get() {
    return obj.firstName + "-" + obj.lateName;
  },
  set(value) {
    const nameArr = value.split("-");
    obj.firstName = nameArr[0];
    obj.lateName = nameArr[1];
  },
});
</script>

<style lang="scss" scoped module></style>
